/*
* Created on Tue Jun 13 2023 by Admin
*
* Copyright (c) 2023 shuangdi
*
* description: index3
*
* date: 2025/9/12
*/
<template>
  <div class="root" ref="rootBox">
    <div class="center_box" ref="centerBox">
      <div class="s_center_box" ref="sCenterBox">
        <img :src="imgSrc" alt="" class="imgMap" ref="imgMapDom">
        <AntV ref="antDom"></AntV>
        <div class="menu_box" ref="menuBox">
          <div class="line_row line_row1">
            <div class="title">人员</div>
            <div class="content content1">
              <div v-for="item in list.data1" class="single_photo">
                <img :src="item.photo" alt="" @click="selectItem1(item)">
                <p>{{ item.name }}</p>
              </div>
            </div>
          </div>
          <div class="line_row line_row2">
            <div class="title">救亡演剧队</div>
            <div class="content content2">
              <div v-for="item in list.data2" class="single_photo">
                <img :src="item.photo" alt="" @click="selectItem2(item)">
                <p>{{ item.name }}</p>
              </div>
            </div>
          </div>
          <div class="line_row line_row3">
            <div class="title">刊物</div>
            <div class="content content3">
              <div v-for="item in list.data3" class="single_photo">
                <img :src="item.photo" alt="" @click="selectItem3(item)">
                <p>{{ item.name }}</p>
              </div>
            </div>
          </div>
        </div>
        <!--        <div class="btn_box">-->
        <!--          <a-radio-group v-model:value="mapData" @change="changeData">-->
        <!--            <a-radio-button value="a">主要足迹</a-radio-button>-->
        <!--            <a-radio-button value="b">全部足迹</a-radio-button>-->
        <!--          </a-radio-group>-->
        <!--        </div>-->
        <div class="model_box">
          <div class="first_model" v-if="showFirstModel">
            <div class="close_btn" @click="closeModel1">
              <CloseCircleOutlined/>
            </div>
            <div class="s_fm">
              <div class="title">
                <p>
                  <span v-if="detailData.type==='person'">{{ detailData.name }}</span>
                  <span v-else>救亡演剧{{ detailData.name }}</span>
                </p>
                <p v-if="detailData.type==='person'">男</p>
              </div>
              <div class="img_box">
                <div class="s_img_box">
                  <img :src="detailData.pic" alt="pic">
                </div>
              </div>
              <div class="text1_box">
                <p>{{ detailData.description }}</p>
              </div>
              <div class="text2_box" v-if="detailData.type==='person'">
                <p class="line">在《黄河大合唱》的歌声中，</p>
                <p class="line">我们听懂了你的哀怨，熟悉了你的船歌，</p>
                <p class="line">理解了你的咆哮，记住了你的怒吼。</p>
                <p class="line">有多少这样的乐章，就有多少黄河的子孙，</p>
                <p class="line">加入到这激越的交响，有多少这样的浪花，</p>
                <p class="line">就有多少不愿做奴隶的人们，</p>
                <p class="line">为民族的命运而合唱!</p>
                <p class="line">坚忍不拔、志存高远、求真务实、爱国奉献</p>
                <p class="line">的冼星海精神必将薪火相传!</p>
              </div>
              <div class="text2_box" v-if="detailData.type==='group'">
                <div class="s_text2_box">
                  <div class="name">上演特色剧目：</div>
                  <div class="box">
                    <p v-for="item in detailData.program" @click="selectData(item)">
                      <span>{{ item.name }}</span>
                      <img src="@/assets/images/first/lianjie.png" alt="">
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="second_model" v-if="showSecondModel">
            <div class="close_btn" @click="closeModel2">
              <CloseCircleOutlined/>
            </div>
            <div class="content_box">
              <p class="title">{{ secondDetailData.name }}</p>
              <p class="content">{{ secondDetailData.description }}</p>
              <p class="line_text">
                <img src="@/assets/images/first/logo3.png" alt="pic" @click="goCnbksy">
                <span>文献库收藏有该剧原剧版本，点击下图阅读：</span>
              </p>
              <div class="content_img">
                <img :src="secondDetailData.pic" @click="openPage(secondDetailData)">
              </div>
              <div class="citation">
                <span>引文：</span>
                <span @click="openPage(secondDetailData)">{{ secondDetailData.citation }}</span>
              </div>
            </div>
          </div>
          <div class="third_model" v-if="showThirdModel">
            <div class="close_btn" @click="closeModel1">
              <CloseCircleOutlined/>
            </div>
            <div class="s_fm">
              <div class="title">
                <p>
                  <span v-if="detailData.type==='person'">{{ detailData.name }}</span>
                  <span v-else>救亡演剧{{ detailData.name }}</span>
                </p>
                <p v-if="detailData.type==='person'">男</p>
              </div>
              <div class="img_box">
                <div class="s_img_box">
                  <img :src="detailData.pic" alt="pic">
                </div>
              </div>
              <div class="text1_box">
                <p>{{ detailData.description }}</p>
              </div>
              <div class="text2_box" v-if="detailData.type==='person'">
                <p>在《黄河大合唱》的歌声中，</p>
                <p>我们听懂了你的哀怨，熟悉了你的船歌，</p>
                <p>理解了你的咆哮，记住了你的怒吼。</p>
                <p>有多少这样的乐章，就有多少黄河的子孙，</p>
                <p>加入到这激越的交响，有多少这样的浪花，</p>
                <p>就有多少不愿做奴隶的人们，</p>
                <p>为民族的命运而合唱!</p>
                <p>坚忍不拔、志存高远、求真务实、爱国奉献</p>
                <p>的冼星海精神必将薪火相传!</p>
              </div>
              <div class="text2_box" v-if="detailData.type==='group'">
                <div class="s_text2_box">
                  <div class="name">上演特色剧目：</div>
                  <div class="box">
                    <p v-for="item in detailData.program" @click="selectData(item)">
                      <span>{{ item.name }}</span>
                      <img src="@/assets/images/first/lianjie.png" alt="">
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--        <div class="next_btn">-->
        <!--          <a-button type="primary" @click="nextBtn">下一步</a-button>-->
        <!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script setup>
import imgSrc from '@/assets/images/bg/bg.jpg'
import AntV from '@/components/graph/index.vue'
import {onMounted, ref} from "vue";
import data from "@/data/data1.js";
import list from "@/data/data2.js";
import {CloseCircleOutlined} from '@ant-design/icons-vue'
import {message} from "ant-design-vue";
import router from "@/router/index.js";

const mapBounds = {
  west: 86.794319,   // 左上角经度
  north: 42.343129,  // 左上角纬度
  south: 20.558255,   // 右下角纬度
  east: 131.676658   // 右下角经度
};
const rootBox = ref()
const menuBox = ref()
const antDom = ref()
const centerBox = ref()
const sCenterBox = ref()
let mapData = ref('a')
let showFirstModel = ref(false)
let showSecondModel = ref(false)
let showThirdModel = ref(false)
let detailData = ref({})
let secondDetailData = ref({})
let thirdDetailData = ref({})

// 经度 -> X 像素
function longitudeToX(lng) {
  const x = (lng - mapBounds.west) / (mapBounds.east - mapBounds.west) * sCenterBox.value.clientWidth;
  return Math.max(0, Math.min(x, sCenterBox.value.clientWidth)); // 限制在画布范围内
}

// 纬度 -> Y 像素（注意：纬度越高，Y 越小）
function latitudeToY(lat) {
  const y = (1 - (lat - mapBounds.south) / (mapBounds.north - mapBounds.south)) * sCenterBox.value.clientHeight;
  return Math.max(0, Math.min(y, sCenterBox.value.clientHeight)); // 限制在画布范围内
}

// 切换数据
function changeData() {
  antDom.value.showHideElement(mapData.value)
}

// 人员弹框
function selectItem1(item) {
  if (item.name !== "洗星海") {
    message.warning('无相关数据')
    return
  }
  detailData.value = item
  showThirdModel.value = false
  showSecondModel.value = false
  showFirstModel.value = true
  antDom.value.setEdgeColor()
}

// 救亡演剧队弹框
function selectItem2(item) {
  if (item.name !== "二队") {
    message.warning('无相关数据')
    return
  }
  detailData.value = item
  showThirdModel.value = false
  showSecondModel.value = false
  showFirstModel.value = true
}

// 刊物弹框
function selectItem3(item) {
  return;
  if (item.name !== '救亡日报') {
    message.warning('无相关数据')
    return
  }
  thirdDetailData.value = item
  showFirstModel.value = false
  showSecondModel.value = false
  showThirdModel.value = true
}

function selectData(item) {
  showSecondModel.value = true
  secondDetailData.value = item
}

// 关闭第一个弹框
function closeModel1() {
  showFirstModel.value = false
}

// 关闭第二个弹框
function closeModel2() {
  showSecondModel.value = false
}

function nextBtn() {
  router.push({path: "/second"})
}

function goCnbksy() {
  window.open('https://www.cnbksy.com/v2/', '_blank')
}

function openPage(item) {
  window.open(item.link, '_blank')
}

//初始化图谱
function initGraph() {
  let newData = JSON.parse(JSON.stringify(data))
  let clientWidth = document.documentElement?.clientWidth
  const boxHeight = centerBox.value.clientHeight
  let img = new Image()
  img.src = imgSrc;
  img.onload = function () {
    const proportion = (img.naturalHeight / img.naturalWidth)
    const boxWidth = Math.ceil(boxHeight / proportion)

    if (boxWidth + 300 <= clientWidth) {
      centerBox.value.style.width = boxWidth + 300 + 'px'
      sCenterBox.value.style.width = boxWidth + 'px'
      menuBox.value.style.right = '-300px'
      rootBox.value.style.display = 'flex'
      rootBox.value.style.justifyContent = 'center'
    } else {
      centerBox.value.style.width = boxWidth - 300 + 'px'
      sCenterBox.value.style.width = boxWidth + 'px'
      menuBox.value.style.right = `${boxWidth - clientWidth}px`
    }
    newData.nodes.forEach(item => {
      item.style.x = longitudeToX(item.long) || -100
      item.style.y = latitudeToY(item.lat) || -100
      item.style.iconSrc = item.photo
      item.style.size = item.cityType === 1 ? 56 : 24
      item.style.iconWidth = item.cityType === 1 ? 50 : 24
      item.style.iconHeight = item.cityType === 1 ? 50 : 24
      item.style.labelFontSize = item.cityType === 1 ? 18 : 12
      item.style.cityType = item.cityType
    })
    const params = {
      optionsConfig: {
        isNewData: false,
        bindNodeClick: true,
        defaultNodeSize: 20,
        defaultLabelSize: 12,
      },
      configuration: {
        nodeId: "id",
        nodeLabel: "name",
        nodeType: 'type',
        edgeLabel: "name",
        edgeType: "type",
        source: "source",
        target: "target",
      },
      data: newData,
    }
    antDom.value.initGraph(params)
  }
}


onMounted(() => {
  initGraph()
})
</script>

<style scoped lang="less">
p {
  margin: 0;
}

.root {
  width: 100%;
  height: 100%;
  //display: flex;
  //justify-content: center;
  //align-items: center;
  background-color: rgb(86, 51, 51);
  //background-color: #ab8080;
  //
  .center_box {
    height: 100%;
    //box-shadow: 0 0 20px 0 #cccccc;

    .s_center_box {
      width: 100%;
      height: 100%;
      position: relative;

      .imgMap {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
      }

      .menu_box {
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
        height: 100%;
        background-color: #feebcb;
        backdrop-filter: blur(10px);
        box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.4);
        padding: 20px 0;

        .line_row {
          &.line_row1 {
            height: 380px;
          }

          &.line_row2 {
            height: 220px;
          }

          &.line_row3 {
            height: 280px;
          }

          .title {
            font-weight: bolder;
            padding: 0 10px;
            width: 100%;
            height: 34px;
            line-height: 34px;
            font-size: 18px;
            border-bottom: 1px solid #751616;
          }

          .content {
            display: flex;
            flex-wrap: wrap;
            height: calc(100% - 34px);

            .single_photo {
              width: calc(100% / 3);
              display: flex;
              justify-content: center;
              flex-direction: column;
              align-items: center;
              align-content: center;


              p {
                font-size: 14px;
              }
            }
          }

          .content1 {
            .single_photo {
              width: calc(100% / 3);

              img {
                object-fit: contain;
                width: 60px;
                height: 70px;
                margin-bottom: 6px;
                cursor: pointer;
              }
            }
          }

          .content2 {
            .single_photo {
              width: calc(100% / 4);

              img {
                width: 50px;
                margin-bottom: 6px;
                cursor: pointer;
              }
            }
          }

          .content3 {
            .single_photo {
              width: calc(100% / 2);

              img {
                width: 60px;
                margin-bottom: 6px;
                cursor: pointer;
              }

              img {
                width: 100px;
              }
            }
          }
        }
      }

      .btn_box {
        position: absolute;
        left: 20px;
        bottom: 20px;
      }

      .model_box {
        position: absolute;
        top: 100px;
        left: 20px;
        width: 1120px;
        height: 790px;
        pointer-events: none;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .first_model {
          pointer-events: auto;
          width: 480px;
          height: 100%;
          background-image: url("@/assets/images/bg/left.png");
          background-size: cover;
          background-repeat: no-repeat;
          padding: 60px 60px;
          z-index: 10;
          position: relative;

          .close_btn {
            top: 30px;
            right: 20px;
            position: absolute;
            font-size: 20px;
            z-index: 10;
            width: 26px;
            height: 26px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
          }

          .s_fm {
            width: 100%;
            height: 100%;

            .title {
              height: 54px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 24px;
              border-bottom: 1px solid black;
            }

            .img_box {
              width: 100%;
              display: flex;
              justify-content: center;
              padding: 10px;

              .s_img_box {
                width: 200px;
                border: 1px solid black;
                text-align: center;
                padding: 10px;

                img {
                  width: 150px;
                }
              }
            }

            .text1_box {
              padding: 0 20px;

              p {
                font-size: 14px;
                text-align: justify;
                text-decoration: underline;
                text-indent: 2em;
              }
            }

            .text2_box {
              text-align: center;
              padding: 20px 20px;

              p {
                font-size: 15px;
                color: black;
              }

              .s_text2_box {
                display: flex;

                .name {
                  width: 120px;
                }

                .box {
                  text-align: left;
                  width: calc(100% - 100px);

                  p {
                    height: 40px;
                    display: flex;
                    cursor: pointer;

                    img {
                      width: 15px;
                      height: 15px;
                    }
                  }
                }
              }
            }
          }
        }

        .second_model {
          width: 600px;
          height: 95%;
          background-color: #faeee2;
          position: relative;
          padding: 50px 30px;
          pointer-events: auto;

          .close_btn {
            top: 10px;
            right: 20px;
            position: absolute;
            font-size: 20px;
            z-index: 10;
            width: 26px;
            height: 26px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
          }

          .content_box {
            width: 100%;
            height: 100%;
            background-color: #fdf0e0;
            border: 1px solid black;
            padding: 0 30px;

            .title {
              width: 100%;
              height: 50px;
              line-height: 50px;
              font-size: 22px;
              text-align: center;
            }

            .content {
              font-size: 16px;
              text-align: justify;
            }

            .line_text {
              margin-top: 10px;
              font-size: 16px;

              img {
                height: 22px;
                cursor: pointer;
              }
            }

            .content_img {
              width: 100%;
              padding: 10px 120px;
              font-size: 16px;

              img {
                width: 100%;
                cursor: pointer;
              }
            }

            .citation {
              cursor: pointer;
              font-size: 16px;
            }
          }
        }

        .third_model {
          pointer-events: auto;
          width: 480px;
          height: 100%;
          background-image: url("@/assets/images/bg/left.png");
          background-size: cover;
          background-repeat: no-repeat;
          padding: 60px 60px;
          z-index: 10;
          position: relative;

          .close_btn {
            top: 30px;
            right: 20px;
            position: absolute;
            font-size: 20px;
            z-index: 10;
            width: 26px;
            height: 26px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
          }

          .s_fm {
            width: 100%;
            height: 100%;

            .title {
              height: 54px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              font-size: 24px;
              border-bottom: 1px solid black;
            }

            .img_box {
              width: 100%;
              display: flex;
              justify-content: center;
              padding: 10px;

              .s_img_box {
                width: 200px;
                border: 1px solid black;
                text-align: center;
                padding: 10px;

                img {
                  width: 150px;
                }
              }
            }

            .text1_box {
              padding: 0 20px;

              p {
                font-size: 14px;
                text-align: justify;
                text-decoration: underline;
                text-indent: 2em;
              }
            }

            .text2_box {
              text-align: center;
              padding: 20px 20px;

              p {
                font-size: 15px;
                color: black;
              }

              .s_text2_box {
                display: flex;

                .name {
                  width: 120px;
                }

                .box {
                  text-align: left;
                  width: calc(100% - 100px);

                  p {
                    height: 40px;
                    display: flex;
                    cursor: pointer;

                    img {
                      width: 15px;
                      height: 15px;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .next_btn {
        position: absolute;
        right: 420px;
        bottom: 20px;
        font-size: 20px;
        cursor: pointer;

        &:hover {
          color: #502f2f;
        }
      }
    }
  }
}

.line {
  font-size: 24px;
  line-height: 1;
  margin: 10px 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  animation: showLine 1s ease-out forwards;
}

.line:nth-child(1) {
  animation-delay: 1s;
}

.line:nth-child(2) {
  animation-delay: 2s;
}

.line:nth-child(3) {
  animation-delay: 3s;
}

.line:nth-child(4) {
  animation-delay: 4s;
}

.line:nth-child(5) {
  animation-delay: 5s;
}

.line:nth-child(6) {
  animation-delay: 6s;
}

.line:nth-child(7) {
  animation-delay: 7s;
}

.line:nth-child(8) {
  animation-delay: 8s;
}

.line:nth-child(9) {
  animation-delay: 9s;
}

@keyframes showLine {
  to {
    opacity: 1;
    max-height: 50px;
  }
}
</style>
